<template>
    <div class="infinite-list-wrapper " style="overflow:auto">
        <ul class="list" v-infinite-scroll="load" infinite-scroll-disabled="disabled" infinite-scroll-distance="distance">
            <li v-for="i in count" class="list-item" style="height: 80px">{{ i }}</li>
        </ul>
        <p v-if="loading">加载中...</p>
        <p v-if="noMore">没有更多了</p>
    </div>
</template>
<script>
import { getScrollHeight, getScrollTop, getWindowHeight } from "../../assets/js/screen.js";
export default {
    data() {
        return {
            count: 20,
            loading: false,
            distance: 20
        }
    },
    computed: {
        noMore() {
            return this.count >= 9999
        },
        disabled() {
            return this.loading || this.noMore
        }
    },
    methods: {
        loadingg() {
            this.loading = true
            setTimeout(() => {
                this.count += 5
                this.loading = false
            }, 2000)
        },
        load() {
            let vm = this;
            if (getScrollTop() + getWindowHeight() >= getScrollHeight()) {
                vm.loadingg()
            }
        },
    },
    mounted() {
        window.addEventListener('scroll', this.load);
    },
    destroyed() {
        window.removeEventListener('scroll', this.load, false);
    }
}
</script>